<template lang="pug">
  div.kalix-navigate()
    el-menu(mode="vertical" v-bind:default-active="$store.state.currentPath"
    v-on:select="handleMenuSelect" router unique-opened
    background-color="#0a6183"
    text-color="#b0b0b0"
    active-text-color="#ffffff")
      el-submenu(v-for="itemMenu in $store.state.menuList" v-bind:index="itemMenu.id" v-bind:key="itemMenu.id")
        template(slot="title")
          i(v-bind:class="itemMenu.iconCls")
          span {{itemMenu.text}}
        el-submenu(v-for="item in $store.state.navigateTreeData[itemMenu.id]" v-bind:index="`${itemMenu.id}_${item.id}`" v-bind:key="item.id")
          template(slot="title")
            i(v-bind:class="item.iconCls" v-bind:data-id="`${itemMenu.id}_${item.id}`")
            span {{item.text}}
          el-menu-item(v-for="itemChildren in item.children" v-bind:index="`/${itemChildren.routeId}`" v-bind:key="`/${itemChildren.routeId}`")
            template(slot="title")
              i(v-bind:class="itemChildren.iconCls")
              span {{itemChildren.text}}
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'

  export default {
    name: 'KalixNavigate',
    props: {
      cacheTime: {
        type: Number,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      reqUrl: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        name: 'kalixNav',
        currApp: '',
        currFun: '',
        activeName: '1',
        obj: {'name': 'aa'},
        treeData: {},
        clickedNode: null,
        flag: true,
        menuChk: false,
        activeIndex: '1-1-2'
      }
    },
    activated() {
    },
    mounted() {
    },
    watch: {},
    methods: {
      ...mapMutations({
        setCurrentPath: 'setCurrentPath'
      }),
      handleMenuSelect(key, keyPath) {
        this.setCurrentPath(key)
      }
    }
  }
</script>
